<script setup>
import { ref } from 'vue'
import { getPhoneCodeService, userAuthService } from '@/apis/auth.js'
import { useUserStore } from '@/stores/index.js'

const UserStore = useUserStore()

// 获取表单实例
const form = ref(null)

// 获取验证码倒计时
const countdown = ref(60)

// 当前是否正在获取短信验证码
const is_getCode = ref(false)

// 手机号验证正则表达式
const phoneRegex = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/

// 表单绑定的数据
const formModel = ref({
	phone: '',
	code: ''
})

// 倒计时定时器
const timer = ref(null)

// 表单验证规则
const rules = ref({
	phone: [
		{ pattern: phoneRegex, message: '请输入正确的手机号', trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (!value) {
					callback(new Error('手机号码不能为空'))
				} else {
					callback()
				}
			},
			trigger: 'blur'
		}
	],
	code: [{ type: 'number', required: true, len: 6, message: '请输入有效验证码', trigger: 'blur' }]
})

// 点击获取验证码
const onClickGetCode = async () => {
	// 如果已经在倒计时直接返回
	if (is_getCode.value) {
		return
	}

	// 如果手机号为空弹出提示
	if (!formModel.value.phone) {
		return uni.showToast({
			icon: 'none',
			title: '请输入手机号'
		})
	}

	if (phoneRegex.test(formModel.value.phone)) {
		// 如果定时器存在则清空定时器
		if (timer.value) {
			clearInterval(timer.value)
		}

		// 设置倒计时
		timer.value = setInterval(() => {
			if (countdown.value > 1) {
				countdown.value--
			} else {
				countdown.value = 60
				is_getCode.value = false
				clearInterval(timer.value)
			}
		}, 1000)
		const res = await getPhoneCodeService(formModel.value.phone)
		uni.showToast({
			icon: 'none',
			title: '验证码已发送'
		})
		// 更改倒计时状态,重置倒计时
		is_getCode.value = true
	}
}

// 点击登录账号
const onClickButton = () => {
	// 验证表单数据
	form.value.validate().then(async (valid) => {
		if (valid) {
			const res = await userAuthService(formModel.value)
			// 将token和用户信息存入本地
			if (res.data) {
				UserStore.setUserInfoList(res.data)
			}
			uni.switchTab({
				url: '/pages/my/my'
			})
		}
	})
}
</script>

<template>
	<view class="container">
		<view class="content">
			<view class="top">
				<view class="logo">
					<up-image src="/static/images/logo-icon.png" height="50" width="50"></up-image>
				</view>
				<view class="middle">欢迎使用</view>
				<view class="bottom">乐游汇智能旅行助手</view>
			</view>

			<view class="form">
				<up-form :model="formModel" :rules="rules" ref="form">
					<up-form-item prop="phone">
						<up-input placeholder="请输入手机号" maxlength="11" type="number" v-model.trim="formModel.phone" shape="circle" customStyle="backgroundColor:#f2f5fa">
							<template #prefix>
								<text class="iconfont icon-shoujihao"></text>
							</template>
						</up-input>
					</up-form-item>
					<up-form-item prop="code">
						<up-input placeholder="请填写验证码" maxlength="6" type="number" v-model.trim="formModel.code" shape="circle" customStyle="backgroundColor:#f2f5fa">
							<template #prefix>
								<text class="iconfont icon-yanzhengyanzhengma"></text>
							</template>
							<template #suffix>
								<view class="getCode" v-if="is_getCode">已发送（{{ countdown }}）</view>
								<view class="getCode" v-else @tap="onClickGetCode">获取验证码</view>
							</template>
						</up-input>
					</up-form-item>
					<up-form-item>
						<up-button @tap="onClickButton" text="登 录" customStyle="borderRadius:200rpx;backgroundColor:#5d9cfd;color:#fff;fontWeight:bold;"></up-button>
					</up-form-item>
				</up-form>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100vh;
	background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
	display: flex;
	justify-content: center;
	align-items: center;

	.content {
		width: 90%;
		height: 60%;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 20rpx;
		color: #54595f;

		.top {
			height: 35%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			font-size: 40rpx;

			.bottom {
				font-size: 50rpx;
				font-weight: bold;
			}
		}

		.form {
			padding: 100rpx 20rpx;

			.getCode {
				font-size: 30rpx;
				font-weight: bold;
				color: #5f9eff;
			}
		}
	}
}
</style>
